<template>
	<view class="orderPage">
		<!-- <view class="top">
			<view class="top-btn" v-for="(item, index) in topData" @click="handleClick(item.userId)" :key="index"
				:class="userId==item.userId ? 'active' : ''">
				<text>{{item.nickName}}&nbsp;&nbsp;{{item.productionTime}}分钟</text>
			</view>
		</view> -->
		<view class="bottom">
			<view class="flex center" style="align-items: center;margin: 10px;width: 25%;">
				<view style="width: 140px">
					工序名称：
				</view>
				<el-input v-model="newProcessName" placeholder="请输入工序名称搜索" @blur="getTableData()"></el-input>
			</view>
			<uni-table :loading="loading" style="width: 100% !important;height: 70vh;overflow: auto;" :stripe="false" border
				emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<!-- <uni-th width="80rpx" class="tab-header" align="center">订单号</uni-th> -->
					<uni-th width="60rpx" class="tab-header" align="center">序号</uni-th>
					<uni-th width="60rpx" class="tab-header" align="center">订单号</uni-th>
					<uni-th width="100rpx" class="tab-header" align="center">产品名称</uni-th>
					<uni-th width="60rpx" class="tab-header" align="center">产品图片</uni-th>
					<uni-th width="60rpx" class="tab-header" align="center">产品尺寸</uni-th>
					<uni-th width="60rpx" class="tab-header" align="center">测试缝长</uni-th>
					<uni-th width="60rpx" class="tab-header" align="center">工序名称</uni-th>
					<uni-th width="150rpx" class="tab-header" align="center">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="item.id">
					<!-- 订单号 -->
					<!-- <uni-td class="tab-data" align="center">{{item.sonOrderNum}}</uni-td> -->
					<!-- 排序 -->
					<uni-td class="tab-data" align="center">{{(page.page-1)*page.limit + index+1}}</uni-td>
					<!-- 客户订单号 -->
					<uni-td class="tab-data" align="center">{{item.orderNum}}</uni-td>
					<!-- 产品名称 -->
					<uni-td class="tab-data" align="center">{{item.goodsName}}</uni-td>
					<!-- 产品图片 -->
					<uni-td class="tab-data" align="center">
						<image v-for="(item1,index1) in item.images.split(',')" v-show="index1==0"
							@tap.stop="previewImage(index1, item.images.split(','))" :src="item1" mode="">
						</image>
					</uni-td>
					<!-- 尺寸 -->
					<uni-td class="tab-data" align="center">
						<view style="margin-bottom: 4rpx;">{{item.goodsSizeName}}</view>
						<!-- <view style="color:darkred;">
							{{item.backStyle==1?'拉链':item.backStyle==2?'绑带':item.backStyle==3?'半绑半拉':''}}
						</view> -->
					</uni-td>
					<!-- 测试缝长 -->
					<uni-td class="tab-data" align="center">
						<view style="margin-bottom: 4rpx;">
							{{item.sizeNum}}
							<text style="color: red;margin-left: 10rpx;">{{ item.paragraph }}</text>
						</view>
						<!-- <view style="color:#42B5FF;font-weight: bold; cursor: pointer;" @click="()=>{openDetail(item)}">
							原料详情</view> -->
					</uni-td>
					<!-- 工序名称 -->
					<uni-td class="tab-data" align="center">
						<view style="margin-bottom: 4rpx;">{{item.newProcessName}}</view>
						<!-- <view style="color:#42B5FF;font-weight: bold; cursor: pointer;" @click="()=>{openDetail(item)}">
							原料详情</view> -->
					</uni-td>
					<!-- 操作按钮 -->
					<uni-td align="left">
						<button :disabled="btnDisabled" v-if="item.status==1" class="uni-button" size="mini"
							@click="handleOperate(1,item)"
							style="background-color: #f2125e;color:#fff;margin-right: 5px;cursor: default;" type="danger">
							开始
						</button>
						<!-- <button v-if="item.status==2" class="uni-button" size="mini"
							style="background-color: green;color:#fff;margin-right: 20rpx;" type="primary"
							@click="handleOperate(1,item)">
							完成生产
						</button> -->
						<button :disabled="btnDisabled" v-if="item.status==2" class="uni-button" size="mini"
							style="background-color: #42B5FF;color:#fff;" type="primary" @click="handleOperate(2,item)">
							结束
						</button>
						<button :disabled="btnDisabled" class="uni-button" size="mini" style="background-color: #42B5FF;color:#fff;"
							type="primary" @click="()=>{delShow = true; record = item}">
							删除
						</button>

						<!-- <button 
							v-if="item.status==5"
							class="uni-button" 
							size="mini" 
							style="background-color: #fc6d18;color:#fff;margin-left: 5px;"
							type="primary" 
							@click="()=>{cancelShow = true; record = item}"
						>
							取消中
						</button> -->
					</uni-td>
				</uni-tr>
			</uni-table>
			<!-- 分页器 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
				:page-sizes="[10, 20, 30, 40]" :page-size="page.limit" :background="true" layout="total, sizes, pager, jumper"
				:total="total"
				style="font-size: 30rpx !important; text-align:right; margin: 10rpx 0;user-select: none !important;">
			</el-pagination>
		</view>
		<!-- 详情弹框 -->
		<uni-popup ref="popup" type="center" :animation="false">
			<view style="height:600px; overflow:auto; background-color: #fff; padding:30rpx">
				<uni-table :loading="loading" style="width: 100% !important;" :stripe="false" border emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="50rpx" class="tab-header" align="center">序号</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">原料图片</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">原料名称</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">需要数量</uni-th>
						<uni-th width="130rpx" class="tab-header" align="center">单位</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in detailData" :key="item.id">
						<!-- 排序 -->
						<uni-td class="tab-data" align="center">{{index+1}}</uni-td>
						<!-- 原料图片 -->
						<uni-td class="tab-data" align="center">
							<image v-for="(item1,index1) in item.image.split(',')" v-show="index1==0"
								@tap="previewImage(index1, item.image.split(','))" :src="item1" mode=""></image>
						</uni-td>
						<!-- 原料名称 -->
						<uni-td class="tab-data" align="center">{{item.stockName}}</uni-td>
						<!-- 需要数量 -->
						<uni-td class="tab-data" align="center">{{item.reqNum}}</uni-td>
						<!-- 单位 -->
						<uni-td class="tab-data" align="center">{{item.units}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</uni-popup>
		<!-- 开包确认框 -->
		<u-modal :show="unpackShow" title="提示" :content="'确认开包吗？'" showConfirmButton showCancelButton confirmText="确认"
			cancelText="取消" @confirm="handleUnpack" @cancel="unpackShow=false"></u-modal>
		<!-- 生产完成确认框 -->
		<u-modal :show="accomplishShow" title="提示" :content="'确认完成生产吗?'" showConfirmButton showCancelButton confirmText="确认"
			cancelText="取消" @confirm="handleAccomplish" @cancel="accomplishShow=false"></u-modal>
		<!-- 确认取消 -->
		<u-modal :show="cancelShow" title="提示" :content="'确认取消吗?'" showConfirmButton showCancelButton confirmText="确认"
			cancelText="取消" @confirm="handleCanceling()" @cancel="cancelShow=false"></u-modal>

		<u-modal :show="delShow" title="提示" :content="'确认删除吗?'" showConfirmButton showCancelButton confirmText="确认"
			cancelText="取消" @confirm="handledeleteUnrealOrder()" @cancel="delShow=false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false, //表格加载状态
				page: {
					page: 1,
					limit: 10
				},
				total: 0,
				record: '', //当前行的数据
				unpackShow: false, //开包弹框
				accomplishShow: false, //完成生产弹框
				cancelShow: false, //取消中弹框

				topData: {}, //顶部按钮文字数据
				userId: '', //点击顶部按钮后，所对应的userId
				tableData: {}, //下方的表格数据

				colorImageList: [], //颜色标识
				skirtGoodsImageList: [], //产品图片
				sutureImageList: [], //缝合部位图

				detailData: {}, //接口获取的详情数据    
				btnDisabled: false,

				delShow: false,
				newProcessName: "",
			}
		},
		mounted() {
			// this.getBtnData(1) //1代表将顶部按钮userId重置    0表示只重新获取按钮文字数据不重置userId
			this.getTableData();
		},
		methods: {
			//操作按钮
			handleOperate(type, row) {
				this.btnDisabled = true;
				this.api.updateUnrealOrderStatus({
					id: row.id,
					type: type
				}).then(res => {
					this.btnDisabled = false;
					this.getTableData();
					uni.$u.toast('操作完成！') //操作成功提示
				}).finally(() => {
					this.btnDisabled = false;
				})
			},
			//删除
			handledeleteUnrealOrder() {
				this.btnDisabled = false;
				this.api.deleteUnrealOrder({
					id: this.record.id
				}).then(res => {
					this.delShow = false;
					this.getTableData();
					uni.$u.toast('操作完成！') //操作成功提示
				}).finally(() => {
					this.delShow = false;
					this.btnDisabled = false;
				})
			},
			// 取消中
			handleCanceling() {
				let query = {
					handOrderNum: this.record.handOrderNum
				}
				this.api.canceling(query).then(res => {
					this.getTableData(this.userId)
					this.cancelShow = false
					uni.$u.toast('取消完成！') //操作成功提示
				})
			},
			// 切换页码
			handleCurrentChange(val) {
				this.page.page = val
				this.getTableData(this.userId)
			},
			// 切换每页条数
			handleSizeChange(val) {
				this.page.limit = val
				this.page.page = 1 //切换之后要把当前页复位为 1
				this.getTableData(this.userId)
			},
			//打开详情弹框并获取数据
			openDetail(item) {
				this.record = item
				this.$refs.popup.open('center');
				this.api.detail({
					sonOrderId: this.record.sonOrderId
				}).then((res) => {
					this.detailData = res.data.data
				})
			},
			// // 获取头部按钮数据
			// getBtnData(status) {
			// 	this.api.orderData({}).then((res) => {
			// 		this.topData = res.data.data
			// 		//让userData为获取到的第一个数据，并且随后获取一次表格数据
			// 		if (status) {
			// 			this.userId = this.topData[0].userId
			// 		}
			// 		this.getTableData(this.userId)
			// 	})
			// },
			// 头部按钮点击事件
			// handleClick(userId) {
			// 	// 防止重复点击
			// 	if (this.userId == userId) {
			// 		return
			// 	}
			// 	this.page.page = 1 //切换顶部按钮之后，把当前页重置为 1
			// 	this.userId = userId
			// 	this.getTableData(this.userId)
			// },
			// 获取下方表格数据
			getTableData(userId) {
				this.loading = true
				this.api.getUnrealOrderList({
					...this.page,
					newProcessName: this.newProcessName
				}).then((res) => {
					console.log(11111, res);
					this.tableData = res.data.data
					this.total = res.data.data
					this.loading = false
				}).finally(() => {
					this.loading = false
				})
			},
			// 图片预览
			previewImage(index, urls) {
				//uniapp图片预览
				uni.previewImage({
					current: index, //所预览当前图片的下标
					urls: urls,
					indicator: 'number'
				})
			},
			// 开包按钮点击事件
			handleUnpack() {
				this.api.unpack({
					id: this.record.id
				}).then((res) => {
					this.getBtnData(0) //重新获取顶部按钮数据和表格数据
					this.unpackShow = false
					uni.$u.toast('开包完成！') //操作成功提示
				})
			},
			// 生产完成按钮点击事件
			handleAccomplish() {
				this.api.accomplish({
					id: this.record.id
				}).then((res) => {
					this.getBtnData(0) //重新获取顶部按钮数据和表格数据
					this.accomplishShow = false //关闭弹框
					uni.$u.toast('生产完成！') //操作成功提示
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		width: 100%;
	}

	.orderPage {
		width: 97%;
		margin: 0 auto;
	}

	.orderPage .top {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		overflow: scroll;

	}

	.orderPage .bottom {
		/* width: 100%; */
		background-color: #f5f5f5;
		overflow: auto;
		margin-top: 40rpx;
	}

	.orderPage .top-btn {
		width: 258rpx;
		height: 50rpx;
		background: #fff;
		border: 4rpx solid #C8C8C8;
		opacity: 1;
		border-radius: 10rpx;
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 50rpx;
		margin-bottom: 20rpx;
		cursor: pointer;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 26rpx;
		color: #333333;
	}

	.orderPage .active {
		background-color: #42B5FF;
		color: #fff;
	}

	.tab-header {
		background: #42B5FF;
		font-size: 27rpx;
		font-weight: 400;
		font-family: Microsoft YaHei;
		line-height: 26rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.orderPage image {
		width: 80rpx;
		height: 80rpx;
	}

	.tab-data {
		font-size: 24rpx;
	}

	.aaa {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
</style>